import { getGradeList } from '@/api'
import { DefaultPagination, gridSpacing, PageSizes } from '@/store/constant'
import { GridRowModel } from '@mui/x-data-grid-pro'
import { GradeItem } from '@/types/common'
import MainCard from '@/ui-component/cards/MainCard'
import useColumns from './useColumns'

const gradeList = () => {
  const [rows, setRows] = useState<GradeItem[]>([])
  const theme = useTheme()
  const matches = useMediaQuery(theme.breakpoints.up('lg'))
  const [paginationModel, setPaginationModel] = useState(DefaultPagination)
  const { data, loading, refresh } = useRequest(
    () => getGradeList({ page: paginationModel.page + 1, size: paginationModel.pageSize }),
    {
      debounceWait: 500,
      cacheKey: `/grade/list_${paginationModel.page}`,
      refreshDeps: [paginationModel],
      onSuccess(res) {
        if (res) {
          const list = (res?.data ?? []) as GradeItem[]
          setRows(list)
        }
      }
    }
  )
  const columns = useColumns({ refresh })
  return (
    <>
      <MainCard title="职级配置" sx={{ minHeight: 500 }}>
        <Grid container spacing={gridSpacing}>
          <Grid
            item
            xs={12}
            sx={{
              minHeight: 500
            }}
          >
            <DataGridPro
              loading={loading}
              getRowId={(row: GridRowModel) => `${row.id}`}
              pagination
              columns={columns}
              rows={rows}
              pageSizeOptions={PageSizes}
              rowCount={data?.total ?? 0}
              paginationModel={paginationModel}
              onPaginationModelChange={setPaginationModel}
              disableRowSelectionOnClick
              paginationMode="server"
              {...(matches && { pinnedColumns: { left: ['name_grade'], right: ['actions'] } })}
            />
          </Grid>
        </Grid>
      </MainCard>
    </>
  )
}
export default gradeList
